<template>
  <div id="artist-detail">
    <artist-header :artistInfo="artistInfo"/>
    <artist-tab-bar
      :tabBarData="['专辑', 'MV']"
      :currentIndex="currentIndex"
      @tabBarClick="tabBarClick"/>
    <div class="container">
      <artist-albums
        v-if="currentIndex === 0"
        :hotAlbums="hotAlbums"
        @scrollUpdate="scrollUpdate"/>
    </div>
  </div>
</template>

<script>
import ArtistHeader from './childrenCpns/ArtistHeader.vue'
import ArtistTabBar from './childrenCpns/ArtistTabBar.vue'
import ArtistAlbums from './childrenCpns/ArtistAlbums.vue'

export default {
  name: 'ArtistDetail',
  components: {
    ArtistHeader,
    ArtistTabBar,
    ArtistAlbums
  },
  data () {
    return {
      artistInfo: null,
      desc: null,
      mvs: null,
      hotSongs: null,
      hotAlbums: null,
      currentIndex: 0
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  created () {
    this._getArtistDetail()
    this._getArtistDesc()
    this._getArtistMvs()
    this._getArtistAlbums()
  },
  methods: {
    async _getArtistDetail () {
      const result = await this.$http.get(`/artists?id=${this.id}`)
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('获取歌手详情失败')
      // 获取成功
      // console.log('单曲')
      this.artistInfo = result.data.artist
      this.hotSongs = result.data.hotSongs
      // console.log(result)
    },
    async _getArtistDesc () {
      const result = await this.$http.get(`/artist/desc?id=${this.id}`)
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('获取歌手描述失败')
      // 获取成功
      // console.log('描述')
      // console.log(result)
    },
    async _getArtistMvs () {
      const result = await this.$http.get(`/artist/mv?id=${this.id}`)
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('获取歌手mv失败')
      // console.log('mv')
      this.mvs = result.data.mvs
      // console.log(result)
    },
    async _getArtistAlbums () {
      const result = await this.$http.get(`/artist/album?id=${this.id}`)
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('获取歌手专辑失败')
      // console.log('专辑')
      // console.log(result)
      this.hotAlbums = result.data.hotAlbums
    },
    tabBarClick (index) {
      this.currentIndex = index
    },
    // 刷新滚动条
    scrollUpdate () {
      this.$emit('scrollUpdate')
    }
  }
}
</script>

<style scoped lang="less">
#artist-detail {
  padding-right: 10px;
  .container {
    padding: 0 30px;
    min-height: 330px;
  }
}
</style>
